<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>老虎机</title>
  <style>
    .box{display: flex;justify-content: center;align-items: center;}
    .laohuji{width:200px;height:200px;border:1px solid red;margin:0 10px;}

    .cell{height: 36px; width: 36px;margin:3px;}
  </style>
</head>

<body>
  <div class="box">
    <div class="laohuji laohuji1"></div>
    <div class="laohuji laohuji2"></div>
  </div>
  <div style="text-align: center;margin-top:10px;">
    <button type="button" onclick="start()">点我开奖</button>
  </div>
  <div class="box">
    <div class="cell c0"></div>
    <div class="cell c1"></div>
    <div class="cell c2"></div>
    <div class="cell c3"></div>
    <div class="cell c4"></div>
    <div class="cell c5"></div>
    <div class="cell c6"></div>
    <div class="cell c7"></div>
    <div class="cell c8"></div>
    <div class="cell c9"></div>
  </div>
  <div style="text-align: center;margin-top:10px;">
    <button type="button" onclick="start1()">点我开球</button>
  </div>

  <script src="js/laohuji.js"></script>
  <script>
    const laohuji1 = new Laohuji({
      el: '.laohuji1',
      data: Array(10).fill().map((v, i) => { // 模拟奖品数据
        let randomColor = '#' + Math.floor(0x1000000 * Math.random()).toString(16);
        return {
          name: `第${i + 1}种颜色`,
          color: randomColor,
        };
      }),
      htmlMaker: d => {
        return (`
          <div style="width:100%;height:100%;font-size:20px;display:flex;align-items:center;text-align:center;justify-content:center;">
            <div>
              <div>${d.name}</div>
              <div style="color:${d.color};">${d.color}</div>
            </div>
          </div>
        `).replace(/\s*\n\s*/g, '');
      },
    });
    const laohuji2 = new Laohuji({
      el: document.querySelector('.laohuji2'),
      data: [ // 模拟奖品数据
        {
          name: '美女',
          src: `img/0.jpg`,
        },
        {
          name: '菊花',
          src: `img/1.jpg`,
        },
        {
          name: '长城',
          src: `img/2.jpg`,
        },
        {
          name: '不知名花',
          src: `img/3.jpg`,
        },
        {
          name: '海蜇',
          src: `img/4.jpg`,
        },
        {
          name: '树袋熊',
          src: `img/5.jpg`,
        },
        {
          name: '不知名山',
          src: `img/6.jpg`,
        },
        {
          name: '企鹅',
          src: `img/7.jpg`,
        },
        {
          name: '郁金香',
          src: `img/8.jpg`,
        },
        {
          name: '冰山',
          src: `img/9.jpg`,
        },
      ],
      htmlMaker: d => {
        return (`
          <div style="width:100%;height:100%;font-size:20px;display:flex;align-items:center;justify-content:center;background:url(${d.src}) center/contain;">
            <span style="background:rgba(0,0,0,.8);color:#fff;padding:10px;border-radius:4px;">${d.name}</span>
          </div>
        `).replace(/\s*\n\s*/g, '');
      },
      curIdx: 2,
    });

    function start() {
      laohuji1.start();
      laohuji2.start();
    }

    const nums = {
      '1': 246,
      '2': 42,
      '3': 83,
      '4': 123,
      '5': 286,
      '6': 1,
      '7': 205,
      '8': 164,
      '9': 327,
      '10': 368,
    };
    const balls = Array(10).fill().map((v, i) => {
      return new Laohuji({
        el: '.cell.c' + i,
        data: Array(10).fill().map((v, i) => i + 1),
        htmlMaker: d => {
          return `<div style="width:100%;height:100%;background: url(img/bjpknum.png) no-repeat -${nums[d]}px 0;transform:scale(0.9)"></div>`;
        },
      });
    });
    function start1() {
      balls.forEach(ball => ball.start());
    }
  </script>
</body>

</html>